<!-- <template>
  <div id="knowledge-graph" ref="chartRef"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { useUserStore } from '@/store/modules/user'

const chartRef = ref(null)
// 传递知识图谱点击项数据
const userStore = useUserStore()
const getKnowledgeGraphDataById = userStore.getKnowledgeGraphDataById;
onMounted(() => {
  renderChart()
})

const renderChart = () => {
  const chart = echarts.init(chartRef.value)
  const data = {
    nodes: [
      { name: '前端工程师', category: '学习', draggable: true ,id: '1' },
      { name: '初级java程序员', category: '练习', draggable: true ,id: '2' },
      { name: '销售经理', category: '练习', draggable: true ,id: '3'},
      { name: '会计', category: '练习', draggable: true ,id: '4'},
      { name: '主管', category: '学习', draggable: true ,id: '5'},
      { name: '总监', category: '学习', draggable: true ,id: '6'},
      { name: '经理', category: '学习', draggable: true ,id: '7'},
      { name: '高级java程序员', category: '练习', draggable: true ,id: '8'},
      { name: '高级前端工程师', category: '练习', draggable: true ,id: '9'},
      { name: '高级销售经理', category: '练习', draggable: true ,id: '10'},
      { name: '高级会计', category: '学习', draggable: true ,id: '11'},
      { name: '高级主管', category: '学习', draggable: true ,id: '12'},
      { name: '高级总监', category: '学习', draggable: true ,id: '13'},
      { name: '高级经理', category: '学习', draggable: true ,id: '14'}
    ],
    links: [
      // 将节点用id连接
      { source: '1',target: '2' ,category: '学习' },
      { source: '2', target: '3', category: '学习' },
      { source: '3', target: '4', category: '学习' },
      { source: '4', target: '5', category: '练习' },
      { source: '5', target: '6', category: '练习' },
      { source: '6', target: '7', category: '练习' },
      { source: '7', target: '8', category: '学习' },
      { source: '8', target: '9', category: '学习' },
      { source: '9', target: '10', category: '学习' },
      { source: '10', target: '11', category: '学习' },
      { source: '11', target: '12', category: '学习' },
      { source: '12', target: '13', category: '学习' },
      { source: '13', target: '14', category: '学习' }
    ]
  }
  const symbolSize = 40;
  const textSize = 20;
  const options = {
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        if (params.dataType === 'node') {
          return params.data.name;
        }else{
          return params.data.category;
        }
      },
    },
    backgroundColor: '#201527',
    series: [
      {
        type: 'graph',
        layout: 'force',
        focusNodeAdjacency: true,
        force: {
          repulsion: 100,
          edgeLength: [30, 100]
        },
        symbolSize: symbolSize,
        roam: true,
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [0, 8],
        edgeLabel: {
          show: true,
          fontSize: 8,
          formatter: (params) => {
            return params.data.category;
          },
        },
        label: {
          show: true,
          formatter: (params) => {
            let labelLength = params.data.name.length;
            if(labelLength * textSize > symbolSize){
              return params.data.name.substring(0,parseInt(symbolSize/textSize)) + '...';
            }else{
              return params.data.name;
          }}
        },
        itemStyle: {
          shadowBlur:10,
          shadowColor:'rgba(0, 0, 0, 0.3)',
          shadowOffsetY: 5,
          color:{
            type:'radial',
            x:0.5,
            y:0.5,
            r:1,
            colorStops: [{
              offset: 0, color: '#006f9e' // 0% 处的颜色
            }, {
              offset: 1, color: ' #77d5fd' // 100% 处的颜色
            }],

          }
        },
        emphasis: {
          focus: 'adjacency',
          itemStyle:{
            shadowColor:'rgba(255, 255, 255, 0.8)',
            border:{
              color:'rgba(255, 0, 0, 1)',
              width:2
            }
          },
          label: {
            show: true,
            color: '#ebf2f4'
          }
          
        },
        data: data.nodes,
        links: data.links,
        categories: data.categories
      }
    ]
  }
  chart.on('mouseup', function () {
    chart.setOption(options)
  })
  chart.on('click', function (params) {
    getKnowledgeGraphDataById(params.data.id)
  })
  chart.setOption(options)
  
  
}
</script>

 -->
 <template>
  <div :style="{ width: '100%', height: '100%' }" id="knowledge-graph">
    <Echarts :option="option" />
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  import Echarts from '@/components/reEcharts/index.vue';
  const data = {
    nodes: [
      { name: '前端工程师', category: '学习', draggable: true ,id: '1' },
      { name: '初级java程序员', category: '练习', draggable: true ,id: '2' },
      { name: '销售经理', category: '练习', draggable: true ,id: '3'},
      { name: '会计', category: '练习', draggable: true ,id: '4'},
      { name: '主管', category: '学习', draggable: true ,id: '5'},
      { name: '总监', category: '学习', draggable: true ,id: '6'},
      { name: '经理', category: '学习', draggable: true ,id: '7'},
      { name: '高级java程序员', category: '练习', draggable: true ,id: '8'},
      { name: '高级前端工程师', category: '练习', draggable: true ,id: '9'},
      { name: '高级销售经理', category: '练习', draggable: true ,id: '10'},
      { name: '高级会计', category: '学习', draggable: true ,id: '11'},
      { name: '高级主管', category: '学习', draggable: true ,id: '12'},
      { name: '高级总监', category: '学习', draggable: true ,id: '13'},
      { name: '高级经理', category: '学习', draggable: true ,id: '14'}
    ],
    links: [
      // 将节点用id连接
      { source: '1',target: '2' ,category: '学习' },
      { source: '2', target: '3', category: '学习' },
      { source: '3', target: '4', category: '学习' },
      { source: '4', target: '5', category: '练习' },
      { source: '5', target: '6', category: '练习' },
      { source: '6', target: '7', category: '练习' },
      { source: '7', target: '8', category: '学习' },
      { source: '8', target: '9', category: '学习' },
      { source: '9', target: '10', category: '学习' },
      { source: '10', target: '11', category: '学习' },
      { source: '11', target: '12', category: '学习' },
      { source: '12', target: '13', category: '学习' },
      { source: '13', target: '14', category: '学习' }
    ]
  }
  const symbolSize = 40;
  const textSize = 20;
  const options = {
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        if (params.dataType === 'node') {
          return params.data.name;
        }else{
          return params.data.category;
        }
      },
    },
    backgroundColor: '#201527',
    series: [
      {
        type: 'graph',
        layout: 'force',
        focusNodeAdjacency: true,
        force: {
          repulsion: 100,
          edgeLength: [30, 100]
        },
        symbolSize: symbolSize,
        roam: true,
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [0, 8],
        edgeLabel: {
          show: true,
          fontSize: 8,
          formatter: (params) => {
            return params.data.category;
          },
        },
        label: {
          show: true,
          formatter: (params) => {
            let labelLength = params.data.name.length;
            if(labelLength * textSize > symbolSize){
              return params.data.name.substring(0,parseInt(symbolSize/textSize)) + '...';
            }else{
              return params.data.name;
          }}
        },
        itemStyle: {
          shadowBlur:10,
          shadowColor:'rgba(0, 0, 0, 0.3)',
          shadowOffsetY: 5,
          color:{
            type:'radial',
            x:0.5,
            y:0.5,
            r:1,
            colorStops: [{
              offset: 0, color: '#006f9e' // 0% 处的颜色
            }, {
              offset: 1, color: ' #77d5fd' // 100% 处的颜色
            }],
          }
        },
        emphasis: {
          focus: 'adjacency',
          itemStyle:{
            shadowColor:'rgba(255, 255, 255, 0.8)',
            border:{
              color:'rgba(255, 0, 0, 1)',
              width:2
            }
          },
          label: {
            show: true,
            color: '#ebf2f4'
          }
        },
        data: data.nodes,
        links: data.links,
        categories: data.categories
      }
    ]
  }
  const option = reactive({
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        if (params.dataType === 'node') {
          return params.data.name;
        }else{
          return params.data.category;
        }
      },
    },
    backgroundColor: '#201527',
    series: [
      {
        type: 'graph',
        layout: 'force',
        focusNodeAdjacency: true,
        force: {
          repulsion: 100,
          edgeLength: [30, 100]
        },
        symbolSize: symbolSize,
        roam: true,
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [0, 8],
        edgeLabel: {
          show: true,
          fontSize: 8,
          formatter: (params) => {
            return params.data.category;
          },
        },
        label: {
          show: true,
          formatter: (params) => {
            let labelLength = params.data.name.length;
            if(labelLength * textSize > symbolSize){
              return params.data.name.substring(0,parseInt(symbolSize/textSize)) + '...';
            }else{
              return params.data.name;
          }}
        },
        itemStyle: {
          shadowBlur:10,
          shadowColor:'rgba(0, 0, 0, 0.3)',
          shadowOffsetY: 5,
          color:{
            type:'radial',
            x:0.5,
            y:0.5,
            r:1,
            colorStops: [{
              offset: 0, color: '#006f9e' // 0% 处的颜色
            }, {
              offset: 1, color: ' #77d5fd' // 100% 处的颜色
            }],

          }
        },
        emphasis: {
          focus: 'adjacency',
          itemStyle:{
            shadowColor:'rgba(255, 255, 255, 0.8)',
            border:{
              color:'rgba(255, 0, 0, 1)',
              width:2
            }
          },
          label: {
            show: true,
            color: '#ebf2f4'
          }
          
        },
        data: data.nodes,
        links: data.links,
        categories: data.categories
      }
    ]
  });
  </script>
  <style >
    #knowledge-graph {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      border:3px solid #201527;
      box-shadow: 2px 2px 10px rgba(0,0,0,.1);
    }
    </style>